<template>
    <div>
        <div class="head-img">
            <img src="../images/article-top.jpg" alt="" width="100%" height="100%">
        </div>

        <!--文章列表-->
        <div class="row article-list" id="list">
            <div class="header">
                <div class="list">
                    <ul  class="nav navbar-nav ">
                        <li><router-link to="/"><i class="glyphicon glyphicon-home"></i></router-link></li>
                        <li>社区</li>
                    </ul>
                </div>
            </div>
            <div class="col_24">
                <dl>
                    <dd v-for="article in list">
                        <router-link :to="'/article-details?id='+article.id" target="_blank" class="img"><img :src="url(article.file.url, '480x275')" ></router-link>
                        <div id="title"><router-link :to="'/article-details?id='+article.id">{{date('Y年m月d日', article.create_at)}}</router-link></div>
                        <div id="keyword"><router-link :to="'/article-details?id='+article.id">{{article.title}}</router-link></div>
                        <div id="desc">{{article.description}}　</div>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
</template>

<script>
    require('./article-list.css');
    var loadMore=require('./lib/loadMore.vue');
    var listCore=require('./lib/list/list-core');
    module.exports={
        components:{
            loadMore:loadMore,
        },
        mixins:[listCore],
        data:function () {
            return{
                request: function (params, status) {
                    var item = $.extend({}, params, status);
                    return JxSdk.content.articleList(item.catId, item.page);
                },
            }
        },
        methods:{
            loadMore:function () {//滚动刷新
                this.loadNextPage();
            },
            date: JxSdk.time.date,
            url:JxSdk.img.getUrl,
        }
    }
</script>